<template>
    <div style="height:750px;width:950px;overflow: auto;">
        <div id="container" style="margin-top: -100px;height:750px;">
        </div>
    </div>
</template>
<script>
import { ExtensionCategory, Graph, Polyline, positionOf, register, iconfont } from '@antv/g6';
const data = {
  nodes: [
    { id: '0', data: { label: '采购策划', time: '17:00:00' },code: 'bug_design', state:1 ,desArr: [{currentSatet: 'a'}]},
    { id: '1', data: { label: '采购需求', time: '17:00:05' },code: 'bug_require' , state:2 },
    { id: '2', data: { label: '采购计划', time: '17:00:12' },code: 'bug_plan', state:2 },
    { id: '3', data: { label: '采购方案', time: '17:00:30' },code: 'bug_case', state:2 },
    { id: '4', data: { label: '询价单', time: '17:02:00' },code: 'ask_price', state:3 },
    { id: '5', data: { label: '采购寻源', time: '17:02:40' },code: 'bug_source', state:3 },
    { id: '6', data: { label: '合同管理', time: '17:05:50' },code: 'contract_mg', state:2 },
    { id: '7', data: { label: '订单管理', time: '17:10:00' },code: 'order_mg', state:2 },
  ],
  edges: [
    { source: '0', target: '1', data: { done: true } },
    { source: '1', target: '2', data: { done: true } },
    { source: '2', target: '3', data: { done: true } },
    { source: '3', target: '4', data: { done: true } },
    { source: '4', target: '5', data: { done: false }},
    { source: '5', target: '6', data: { done: false } },
    { source: '6', target: '7', data: { done: false } },
  ],
};

export default {
    name: 'name', // 和菜单代码一致即可开启页面缓存
    props: {
      detailData: null
    },
    data(){
        return {

        }
    },
    created(){
//         const style = document.createElement('style');
// style.innerHTML = `@import url('${iconfont.css}');`;
// document.head.appendChild(style);
        this.initChart()
    },
    methods:{
        initChart() {
            let eIndex = 0
            class SnakePolyline extends Polyline {
                getPoints(attributes) {
                    console.log(attributes,'====attributes')
                    const allData = this.getEndpoints(attributes, false);
                    console.log(allData,'===allData')
                    const [sourcePoint, targetPoint] = allData
                    console.log(!eIndex,'===!eIndex')
                    // if (sourcePoint[0] ==230 && sourcePoint[1] ==135) {
                    //     return [[150, 135, 0], [443.3333435058594, 135, 0]]
                    //     eIndex++
                    //     console.log([[sourcePoint[0] - 80, sourcePoint[1]-80, sourcePoint[2]], targetPoint],'===[sourcePoint, targetPoint]')
                    //     return [[sourcePoint[0] - 80, sourcePoint[1], sourcePoint[2]], targetPoint]
                    // } 
                    console.log([sourcePoint, targetPoint],'===[sourcePoint, targetPoint]')
                    if (sourcePoint[1] === targetPoint[1]) return [sourcePoint, targetPoint];
                    console.log(this.sourceNode,'==this.sourceNode.id')
                    const prevPointId = this.context.model
                    .getRelatedEdgesData(this.sourceNode.id)
                    .filter((edge) => edge.target === this.sourceNode.id)[0]?.source;
                    console.log(prevPointId,'====prevPointId')
                    if (!prevPointId) return [sourcePoint, targetPoint];

                    const prevPoint = positionOf(this.context.model.getNodeLikeDatum(prevPointId));
                    const offset = -(prevPoint[0] - sourcePoint[0]) / 4;
                    console.log(offset,'===offset')
                    console.log(sourcePoint,'===sourcePoint')
                    return [
                    sourcePoint,
                    [sourcePoint[0] + (offset > 70 ? 1.5*offset : 3*offset), sourcePoint[1]],
                    [targetPoint[0] + (offset > 70 ? 1.5*offset : 3*offset), targetPoint[1]],
                    targetPoint,
                    ];
                }
            }

            register(ExtensionCategory.EDGE, 's-polyline', SnakePolyline);

            const graph = new Graph({
            container: 'container',
            zoom: 1,
            data: this.detailData,
            // background: '#dae6ec',
            autoFit: 'center',
            node: {
                // zIndex: 99,
                type: 'html',
                style: {
                    innerHTML:(d) => {
                            const {
                            data: { label },id
                            } = d;
                            const src = '/static/images/demo/' + d.code + d.state +'.svg'

                            const borderColor = d.state==1 ?'#34c679': d.state==2? '#2998ff' : '#a2a2a3'
                            const color = d.state==1 ?'#34c679': d.state==2? '#57585e' : '#a2a2a3'
                            let ml = 0
                            // if (id == '3') ml = -15
                            // else if (this.detailData.nodes.length>9 &&id =='7' ) ml=65
                            // else if (this.detailData.nodes.length>9 &&id =='6' ) ml=40
                            return `
                            <div 
                            style="
                                width:100%; 
                                height: 100%; 
                                // background: ${color}bb; 
                                // border: 1px solid ${color};
                                color: #000;
                                user-select: none;
                                padding-top: 20px;
                                margin-left: ${ml}px; 
                                "
                            >
                            <div style="text-align:center;">
                                <img src="${src}" width="40px">
                                <div>
                                    <span style="font-size: 14px;">${label}</span>
                                </div>
                            </div>
                            <div style="border: 2px dashed ${borderColor};background: #fff;font-size: 11px;color: ${color};height: 143px;width: 135px;text-align:left;line-height: 20px;padding-left: 10px;margin-top: 10px;padding-top:10px;">
                                <div>
                                    当前状态：选中状态
                                </div>
                                <div>
                                    采购名称：物料采购
                                </div>
                                <div>
                                    当前状态：选中状态
                                </div>
                                <div>
                                    当前状态：选中状态
                                </div>
                                <div>
                                    采购编号：PXX-GGG
                                </div>
                                <div>
                                    采购编号：PXX-GGG
                                </div>
                            </div>
                            </div>`},
                    // 状态
                    state: {},
                    size: [150, 85],
                    

                    // labelText: (d) => d.id,
                    // haloStroke: '#227eff',
                    // halo: (d) => (d.id === 'halo' ? true : false),
                    // src: (d) => ('/static/images/demo/' + d.code + d.state +'.svg'),
                    // fill: (d) => (d.data.time ? '#1783ff' : '#d9d9d9'),
                    // lineWidth: 2,
                    // size: 8,
                    // stroke: (d) => (d.data.time ? 'lightblue' : ''),
                    // labelFontWeight: 500,
                    // labelOffsetY: 8,
                    // labelText: (d) => d.data.label,
                    // badge: true,
                    // badges: (d) =>
                    //     true
                    //     ? [
                    //         {
                    //             text: '<p>当前状态：选中状态</p><p>当前状态：选中状态</p>',
                    //             placement: 'bottom',
                    //         },
                            
                    //         ]
                    //     : [],
                },
            },
            edge: {
                type: 's-polyline',
                style: {
                    lineWidth: 2,
                    stroke: '#1783ff',
                    // stroke: (d) => (d.data.done ? '#1783ff' : '#d9d9d9'),
                    lineDash: 4,
                    // router: { type: 'orth' },
                    halo: true, // 边光晕开启
                    haloStroke: '#bee1ff', // 边光晕颜色
                    haloLineWidth: 30,
                    // endArrow: (d) => (d.target == this.detailData.edges.length),
                    // // endArrowShadowOffsetX: -50,
                    // endArrowOffset: -100,
                    // endArrowStroke: '#bee1ff',
                    // endArrowFill: '#1783ff',
                    // endArrowShadowColor: '#bee1ff'
                },
            },
            layout: {
                type: 'snake',
                // preventOverlap: true, // 防止节点重叠
                // nodeSize: 80,
                cols: 4,
                // 每行数量
                rowGap: 170,
                padding: [50, 80, 30,80],
            },
            // defaultNode: { // 节点样式修改
            //     type: 'image', // 设置节点为图片
            //     size: [40, 40] // 节点大小
            // },
            behaviors: ['drag-canvas', 'zoom-canvas', {
            // 节点点击
                type: 'click-select',
                key: 'click-select-1',
                degree: 0, // 选中扩散范围
                // state: 'active', // 选中的状态
                // neighborState: 'neighborActive', // 相邻节点附着状态
                // unselectedState: 'inactive', // 未选中节点状态
                onClick: (d) => {
                    if (d.target.id) {
                        console.log(d.target.id,'===id====点击事件')
                        // window.open(...)
                    }
                }
                }],
            });

            graph.render();
        }
    }
}
</script>
<style lang="scss" scoped>
    ::v-deep #container>div {
        overflow: auto !important;
    }
</style>